import { Image, StyleSheet, ScrollView, View, TouchableOpacity } from 'react-native'
import { ThemedText } from '@/components/ThemedText'
import { ThemedView } from '@/components/ThemedView'
import { useLocalSearchParams } from 'expo-router'
import useResponsive from '@/rem/rem'
import { useNavigation, useRouter } from 'expo-router'
import { Tab, Text, TabView } from '@rneui/themed';
import React from 'react';
import { petData } from '@/mock/mockjs'
import { gifts } from '@/mock/Carousel'
import { usePayContext } from '../AppContext'
export default function Show() {
    const { w, h, fs } = useResponsive()
    const router = useRouter()
    const { item } = useLocalSearchParams<{ item: string }>()
    const parseItem = JSON.parse(decodeURIComponent(item))
    const images = parseItem.img
    const location = parseItem.location
    const [index, setIndex] = React.useState(0);

    const { list2, setList2, setList2_one } = usePayContext();
    // 检查 list2 是否为 undefined
    if (!list2) {
        return <ThemedView style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
            <ThemedText>加载中...</ThemedText>
        </ThemedView>;
    }

    // 设置默认值
    // console.log(list2)
    setList2(petData.list || []);
    const petsData = [
        { id: '1', name: '边境牧羊犬', price: '¥2200', location: '江苏南京', image: 'https://ts4.cn.mm.bing.net/th?id=OIP-C.WatSLewf8XaK6bb6u67mkgHaEo&w=316&h=197&c=8&rs=1&qlt=90&o=6&pid=3.1&rm=2' },
        { id: '2', name: '雪纳瑞犬', price: '¥999', location: '江苏南京', image: 'https://ts4.cn.mm.bing.net/th?id=OIP-C.mSXNTO7ca01w0uL68aP92wHaE7&w=306&h=204&c=8&rs=1&qlt=90&o=6&pid=3.1&rm=2' },
        { id: '3', name: '边境牧羊犬', price: '¥2000', location: '江苏南京', image: 'https://ts3.cn.mm.bing.net/th?id=OIP-C.4A34sOuJTolVk7xEn6avwwEsDh&w=288&h=216&c=8&rs=1&qlt=90&o=6&pid=3.1&rm=2' },
        { id: '4', name: '边境牧羊犬', price: '¥2200', location: '江苏南京', image: 'https://ts2.cn.mm.bing.net/th?id=OIP-C.Tk2OFGoWMjot8ce0kwlfHQHaEo&w=316&h=197&c=8&rs=1&qlt=90&o=6&pid=3.1&rm=2' },
        { id: '5', name: '边境牧羊犬', price: '¥2200', location: '江苏南京', image: 'https://ts2.cn.mm.bing.net/th?id=OIP-C.Tk2OFGoWMjot8ce0kwlfHQHaEo&w=316&h=197&c=8&rs=1&qlt=90&o=6&pid=3.1&rm=2' },
        { id: '6', name: '边境牧羊犬', price: '¥2200', location: '江苏南京', image: 'https://ts2.cn.mm.bing.net/th?id=OIP-C.Tk2OFGoWMjot8ce0kwlfHQHaEo&w=316&h=197&c=8&rs=1&qlt=90&o=6&pid=3.1&rm=2' },
        { id: '7', name: '边境牧羊犬', price: '¥2200', location: '江苏南京', image: 'https://ts2.cn.mm.bing.net/th?id=OIP-C.Tk2OFGoWMjot8ce0kwlfHQHaEo&w=316&h=197&c=8&rs=1&qlt=90&o=6&pid=3.1&rm=2' },
    ];
    const styles = StyleSheet.create({
        container: {
            flex: 1,
            backgroundColor: '#F5FCFF',
        },
        shopInfoContainer: {
            backgroundColor: '#fff',
            padding: 10,
            marginBottom: 10,
        },
        shopAvatarAndRating: {
            flexDirection: 'row',
            alignItems: 'center',
            marginBottom: 10,
        },
        shopAvatar: {
            width: 75,
            height: 75,
            borderRadius: 50,
            marginRight: 10,
        },
        ratingContainer: {
            // backgroundColor: '#FFD700',
            padding: 5,
            borderRadius: 5,
        },
        ratingText: {
            fontSize: 16,
            fontWeight: 'bold',
            color: '#333',
        },
        shopDetails: {
            marginLeft: 60,
        },
        shopName: {
            fontSize: 20,
            fontWeight: 'bold',
            marginBottom: 5,
        },
        shopCertifications: {
            fontSize: 14,
            color: '#666',
            marginBottom: 5,
        },
        shopAddress: {
            fontSize: 14,
            color: '#666',
            marginBottom: 5,
        },
        shopTransactionInfo: {
            fontSize: 14,
            color: '#666',
            marginBottom: 5,
        },
        shopIntroduction: {
            fontSize: 14,
            color: '#666',
        },
        navigationContainer: {
            backgroundColor: '#fff',
            padding: 10,
            marginBottom: 10,
        },
        navigationText: {

        },
        petsContainer: {
            height: h(600),
            backgroundColor: 'pink',
            padding: 10,
        },
        petsHeader: {
            flexDirection: 'row',
            justifyContent: 'space-between',
            marginBottom: 10,
        },
        petsHeaderText: {
            fontSize: 16,
            fontWeight: 'bold',
            color: '#333',
        },
        petview: {
            flexDirection: 'row', // 使用水平排列
            flexWrap: 'wrap', // 允许换行
            justifyContent: 'space-around' // 均匀分布元素
        },
        petItem: {
            width: '49%',
            padding: 5,
            alignItems: 'center',
            // backgroundColor: 'red',
            marginTop: 10,
        },
        petImage: {
            width: '100%',
            height: 150,
            borderRadius: 10,
            marginBottom: 5,
        },
        petInfo: {
            alignItems: 'center',
        },
        petName: {
            fontSize: 16,
            fontWeight: 'bold',
            marginBottom: 5,
        },
        petPrice: {
            fontSize: 16,
            color: '#FF5722',
            marginBottom: 5,
        },
        petLocation: {
            fontSize: 14,
            color: '#666',
            marginBottom: 5,
        },
        playButton: {
            width: 40,
            height: 40,
            borderRadius: 20,
            backgroundColor: 'rgba(0, 0, 0, 0.3)',
            justifyContent: 'center',
            alignItems: 'center',
        },
        list: {
            width: '100%',
            display: 'flex',
            flexWrap: 'wrap',
            flexDirection: 'row',
            justifyContent: 'center',
            alignItems: 'center',
        },
        div: {
            width: 170,
            height: 200,
            backgroundColor: 'pink',
            borderRadius: 10,
            overflow: 'hidden',
            margin: 5,
        },
    })
    return (
        <ScrollView>
            <ThemedView style={styles.container}>
                {/* 顶部店铺信息区域 */}
                <ThemedView style={styles.shopInfoContainer}>
                    <ThemedView style={styles.shopAvatarAndRating}>
                        <Image source={{ uri: images }} style={styles.shopAvatar} />
                        <ThemedView style={styles.ratingContainer}>
                            <ThemedText style={styles.shopName}>{parseItem.name}</ThemedText>
                            <ThemedText style={styles.shopCertifications}>
                                平台认证 已缴保证金 实体店</ThemedText>
                            {/* <ThemedText style={styles.navigationThemedText}>导航</ThemedText> */}
                            <ThemedText style={styles.shopAddress}>
                                地址：{location}--
                                <ThemedText style={styles.navigationText} onPress={() => {

                                    if (location) {
                                        const encodedLocation = encodeURIComponent(JSON.stringify(parseItem));
                                        router.push(`/production/merchant_map?item=${encodedLocation}`);
                                    } else {
                                        console.log('parseItem.location is undefined');
                                    }
                                }}>导航</ThemedText>
                            </ThemedText>
                        </ThemedView>
                    </ThemedView>
                    <ThemedView style={styles.shopDetails}>
                        <ThemedText>★★★★★ 4.9 &gt; </ThemedText>
                        <ThemedText style={styles.shopTransactionInfo}>
                            近30天交易4笔 | 好评4条 | 成交均价2029元
                        </ThemedText>
                        <ThemedText style={styles.shopIntroduction}>
                            简介：汪先生犬舍(悠伴精品宠物)是中国犬业联盟CKU认证犬舍，犬舍编号175710，本犬舍秉承良心养狗，养猫诚信经营的理念，用心饲养每一只宠物，所有宠物...
                        </ThemedText>
                    </ThemedView>
                </ThemedView>

                {/* 下方宠物展示区域 */}
                <ThemedView style={styles.petsContainer}>
                    <Tab
                        value={index}
                        onChange={(e) => setIndex(e)}
                        indicatorStyle={{
                            backgroundColor: 'red',
                            height: 8,
                        }}
                        variant="primary"
                    >
                        <Tab.Item
                            title="宠物"
                            titleStyle={{ fontSize: 12 }}
                            icon={{ name: 'timer', type: 'ionicon', color: 'white' }}
                        />
                        <Tab.Item
                            title="商品"
                            titleStyle={{ fontSize: 12 }}
                            icon={{ name: 'heart', type: 'ionicon', color: 'white' }}
                        />
                        <Tab.Item
                            title="评价"
                            titleStyle={{ fontSize: 12 }}
                            icon={{ name: 'cart', type: 'ionicon', color: 'white' }}
                        />
                    </Tab>

                    <TabView value={index} onChange={setIndex} animationType="spring">
                        <TabView.Item style={{ backgroundColor: 'red', width: '100%' }}>
                            {
                                petData.list.map((petitem, index) => (
                                    <ThemedView style={{ backgroundColor: 'blue', width: 100, height: 100 }}>
                                        <Text >111</Text>
                                    </ThemedView>
                                )

                                )
                            }
                        </TabView.Item>
                        <TabView.Item style={{ backgroundColor: 'blue', width: '100%' }}>
                            <Text h1>
                                <ThemedView style={styles.list}>
                                    {list2 && list2.length > 0 ? (
                                        list2.map((item: any) => {
                                            return (
                                                <TouchableOpacity
                                                    key={item.id}
                                                    onPress={() => {
                                                        router.push(
                                                            `/home/detail?item=${encodeURIComponent(JSON.stringify(item))}`
                                                        );
                                                        
                                                    }}
                                                >
                                                    <ThemedView style={styles.div}>
                                                        <Image
                                                            source={{ uri: item.url }}
                                                            style={{ width: '100%', height: '70%' }}
                                                        />
                                                        <ThemedText style={{ textAlign: 'center', marginTop: 5 }}>
                                                            {item.breed} ￥{item.price}
                                                        </ThemedText>
                                                        <ThemedText style={{ textAlign: 'center', marginTop: 5 }}>
                                                            {item.province} {item.city}
                                                        </ThemedText>
                                                    </ThemedView>
                                                </TouchableOpacity>
                                            );
                                        })
                                    ) : (
                                        <ThemedText style={{ textAlign: 'center', marginTop: 20 }}>暂无数据</ThemedText>
                                    )}
                                </ThemedView>
                            </Text>
                        </TabView.Item>
                        <TabView.Item style={{ backgroundColor: 'green', width: '100%' }}>
                            <Text h1>Cart</Text>
                        </TabView.Item>
                    </TabView>

                </ThemedView>
            </ThemedView>
        </ScrollView>
    )
}

